import React from "react";
import { Section, Input, InputNumber, Switch, ColorPicker } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";
import ColorPalette from "@/visualizations/ColorPalette";

import { isValueNumber } from "../utils";

export default function FormatSettings({ options, data, onOptionsChange }) {
  const inputsEnabled = isValueNumber(data.rows, options);
  return (
    <React.Fragment>
      <Section>
        <InputNumber
          layout="horizontal"
          label="小数点位置"
          data-test="Counter.Formatting.DecimalPlace"
          defaultValue={options.stringDecimal}
          disabled={!inputsEnabled}
          onChange={stringDecimal => onOptionsChange({ stringDecimal })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="小数点符号"
          data-test="Counter.Formatting.DecimalCharacter"
          defaultValue={options.stringDecChar}
          disabled={!inputsEnabled}
          onChange={e => onOptionsChange({ stringDecChar: e.target.value })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="千分位分隔符"
          data-test="Counter.Formatting.ThousandsSeparator"
          defaultValue={options.stringThouSep}
          disabled={!inputsEnabled}
          onChange={e => onOptionsChange({ stringThouSep: e.target.value })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="前缀"
          data-test="Counter.Formatting.StringPrefix"
          defaultValue={options.stringPrefix}
          disabled={!inputsEnabled}
          onChange={e => onOptionsChange({ stringPrefix: e.target.value })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="后缀"
          data-test="Counter.Formatting.StringSuffix"
          defaultValue={options.stringSuffix}
          disabled={!inputsEnabled}
          onChange={e => onOptionsChange({ stringSuffix: e.target.value })}
        />
      </Section>

      <Section>
        <Switch
          data-test="Counter.Formatting.FormatTargetValue"
          defaultChecked={options.formatTargetValue}
          onChange={formatTargetValue => onOptionsChange({ formatTargetValue })}>
          显示目标值
        </Switch>
      </Section>

      <Section>
        <Switch
          data-test="Counter.Formatting.ShowPercent"
          defaultChecked={options.showPercent}
          onChange={showPercent => onOptionsChange({ showPercent })}>
          显示百分比
        </Switch>
      </Section>

      <Section>
        <InputNumber
          layout="horizontal"
          label="分段进度条完成值"
          data-test="Counter.Formatting.SuccessPercent"
          defaultValue={options.successPercent}
          disabled={!inputsEnabled}
          onChange={successPercent => onOptionsChange({ successPercent })}
        />
      </Section>

      <Section>
        <ColorPicker
          layout="horizontal"
          label="进度条最小值颜色"
          interactive
          presetColors={ColorPalette}
          placement="topRight"
          color={options.minColor}
          triggerProps={{ "data-test": "Counter.Formatting.MinColor" }}
          onChange={minColor => onOptionsChange({ minColor })}
          addonAfter={<ColorPicker.Label color={options.minColor} presetColors={ColorPalette} />}
        />
      </Section>

      <Section>
        <ColorPicker
          layout="horizontal"
          label="进度条最大值颜色"
          interactive
          presetColors={ColorPalette}
          placement="topRight"
          color={options.maxColor}
          triggerProps={{ "data-test": "Counter.Formatting.MaxColor" }}
          onChange={maxColor => onOptionsChange({ maxColor })}
          addonAfter={<ColorPicker.Label color={options.maxColor} presetColors={ColorPalette} />}
        />
      </Section>
    </React.Fragment>
  );
}

FormatSettings.propTypes = EditorPropTypes;
